<template>
  <div class="personal-center flex">
    <div>
      <div class="user-card y-card">
        <n-avatar :src="userInfo.photo" round :size="120" />
        <div class="name">{{ userInfo.managerName }}</div>
        <div class="desc">
          {{ userInfo.remark || '这个人很懒,什么都没有留下~' }}
        </div>
      </div>
    </div>
    <div class="right">
      <div class="setting y-card">
        <NTabs default-value="base" size="large" animated>
          <NTabPane name="base" tab="基础信息">
            <base-info />
          </NTabPane>
          <NTabPane name="safety" tab="安全信息">
            <upd-pass />
          </NTabPane>
        </NTabs>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { NTabs, NTabPane, NAvatar } from 'naive-ui'
import BaseInfo from './view/baseInfo.vue'
import UpdPass from './view/updPass.vue'
import { useAppsStore } from '@/stores/modules/app'
import { storeToRefs } from 'pinia'
const appStore = useAppsStore()
const { getUserInfo: userInfo } = storeToRefs(appStore)
</script>
<style scoped lang="scss">
.personal-center {
  padding: 20px;
  .user-card {
    padding: 20px;
    width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .name {
      margin-top: 10px;
      color: #333;
      font-size: 20px;
      font-weight: bold;
    }
    .desc {
      font-size: 15px;
      margin-top: 10rpx;
      color: gray;
    }
  }
  .right {
    margin-left: 20px;
    flex: 1;
    .setting {
      padding: 0 20px;
    }
  }
}
</style>
